<template>
  <div class="header-avatar">
    <span class="userNAme"><el-icon :size="16" class="icon"><User/></el-icon>用户 {{ 'adminx' }}</span>
    <el-dropdown class="logoutTxt" :hide-on-click="false" trigger="click">
      <!--      <img class="avatar" :src="avatarUrl" alt="logo"/>-->
      <span><el-icon :size="16" class="icon"><SwitchButton/></el-icon>退出</span>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item divided @click="logout">退出登陆</el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
  </div>
</template>
<script lang="ts" setup>
// import avatarUrl from '@/assets/images/avatar.png'
import {logout} from '@/utils/router'
import {User, SwitchButton} from "@element-plus/icons-vue";
</script>
<style lang="scss">
.header-avatar {
  //position: relative;
  //width: 134px;
  cursor: pointer;

  //margin-top: -10px;
  //margin-left: 10px;
  //margin-right: 10px;

  .userNAme {
    display: inline-block;
    vertical-align: top;
    font-size: 14px;
    color: #ce3657;
    font-weight: bold;
    margin-right: 20px;

  }

  .icon {
    position: relative;
    top: 2px;
    margin-right: 3px;
  }

  .logoutTxt {
    height: 100px;
    line-height: 100px;
    display: inline-block;
    color: #ce3657;
    font-weight: bold;
  }

  img.avatar {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    border: 1px solid #eee;
    cursor: pointer;
  }
}
</style>
